<template>
  <div class="container">
    <h3>{{ store.account.accountProfile.username }}</h3>
    <h6 class="text-secondary">
      Lv.{{ romanize(store.account.accountProfile.level) }}
      {{ store.account.accountProfile.level_experience }}/{{ store.account.accountProfile.level * 1200 }}
      <span v-if="store.account.accountProfile.level < 4">
        {{
          $t("user.profile.level." + (store.account.accountProfile.level - 1))
        }}
      </span>
      <n-tooltip v-else trigger="hover">
        <template #trigger>
          <span class="text-warning">{{ $t("user.profile.level.end-rank") }}</span>
        </template>
        {{ $t("user.profile.level.nomore-ranks") }}
      </n-tooltip>
    </h6>
    <div class="p-2">
      <div class="card">
        <div class="card-body p-4">
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.username") }}</div>
            <div class="col-8">{{ store.account.accountProfile.username }}</div>
          </div>
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.email") }}</div>
            <div class="col-8">{{ store.account.accountProfile.email }}</div>
          </div>
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.join") }}</div>
            <div class="col-8">{{ new Date(store.account.accountProfile.created_at).toUTCString() }}</div>
          </div>

          <hr />
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.level") }}</div>
            <div class="col-8">{{ store.account.accountProfile.level }}</div>
          </div>
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.exp") }}</div>
            <div class="col-8">{{ store.account.accountProfile.level_experience }}</div>
          </div>
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.upgrade") }}</div>
            <div class="col-8">{{ store.account.accountProfile.level * 1200 }}</div>
          </div>
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.rank") }}</div>
            <div class="col-8">
              <span v-if="store.account.accountProfile.level < 4">
                {{
                  $t("user.profile.level." + (store.account.accountProfile.level - 1))
                }}
              </span>
              <n-tooltip v-else trigger="hover">
                <template #trigger>
                  <span class="text-warning">{{ $t("user.profile.level.end-rank") }}</span>
                </template>
                {{ $t("user.profile.level.nomore-ranks") }}
              </n-tooltip>
            </div>
          </div>

          <hr />
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.profile") }}</div>
            <div class="col-8">
              <code>
                <pre>
                  {{ JSON.stringify(store.account.accountProfile.profile, null, 4) }}
                </pre>
              </code>
            </div>
          </div>

          <hr />
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.group") }}</div>
            <div class="col-8">{{
              store.account.accountGroup.name ? store.account.accountGroup.name : "Didn't join group yet."
            }}</div>
          </div>
          <div v-show="store.account.accountGroup != null">
            <div class="row pt-1">
              <div class="col-4">{{ $t("user.profile.overview.permission") }}</div>
              <div class="col-8">
                <n-tag v-for="(item, index) of store.account.accountGroup.permissions" :key="index">{{ item }}</n-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card mt-4">
        <div class="card-body p-4">
          <div class="row">
            <div class="col-4">{{ $t("user.profile.overview.account") }}</div>
            <div class="col-8">
              <n-button size="tiny" secondary type="warning" @click="modals.profileEditor = true">{{ $t("user.profile.overview.actions.edit-account") }}
              </n-button>&nbsp;
              <n-button size="tiny" secondary type="error" @click="message.info($t('user.profile.overview.actions.delete-account-cannot'))">{{ $t("user.profile.overview.actions.delete-account") }}</n-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <n-modal v-model:show="modals.profileEditor">
      <ProfileEditor @reload="store.init()" @close="modals.profileEditor = false" />
    </n-modal>
  </div>
</template>

<script setup>
import { useStore } from "../../../stores/main.js";
import { reactive } from "vue";
import { NTooltip, NButton, NModal, NTag, useMessage } from "naive-ui";
import ProfileEditor from "./ProfileEditor.vue";

const message = useMessage();
const store = useStore();

const modals = reactive({
  profileEditor: false,
});

function romanize(num) {
  if (isNaN(num)) return NaN;
  let digits = String(+num).split(""),
    key = [
      "",
      "C",
      "CC",
      "CCC",
      "CD",
      "D",
      "DC",
      "DCC",
      "DCCC",
      "CM",
      "",
      "X",
      "XX",
      "XXX",
      "XL",
      "L",
      "LX",
      "LXX",
      "LXXX",
      "XC",
      "",
      "I",
      "II",
      "III",
      "IV",
      "V",
      "VI",
      "VII",
      "VIII",
      "IX",
    ],
    roman = "",
    i = 3;
  while (i--) roman = (key[+digits.pop() + i * 10] || "") + roman;
  return Array(+digits.join("") + 1).join("M") + roman;
}
</script>
